@charset "utf-8";
@import "reset";
@function baifenbi($p){
    @return $p / 1366 * 100%;
}
@function baifenbi-2($p){
    @return $p / 960 *100%;
}
.WebConent{
    width: 100%;
}
.WebConent-yemian{
    color: #686f76;
    margin-left:baifenbi(183);
    font-size: 13px;
    height: 59px;
    line-height: 59px;
    cursor: pointer;
}
.WebConent-Lunbo{
    overflow: hidden;
    width: 100%;
    text-align: center;
    position: relative;
    >div{
        position: absolute;
        top:66px;
        left: 260px;
        text-align: left;
        >h1{
            font-size: 22px;
            color: white;
            line-height: 35px;
        }
        >h2{
            font-size: 18px;
            color: #e60012;
            line-height: 20px;
            
        }
        >h3{
            line-height: 20px;
            font-size: 14px;
            font-weight: 100;
            color: white;
            
        }
        >div{
            cursor: pointer;
            position: absolute;
            bottom:-40px;
            width: 83px;
            height: 20px;
            background: black;
            border-radius:10px;
            display: inline-block;
            color: white;
            font-size: 12px;
            line-height: 20px;
            >img{
                margin-left: 7px;
                vertical-align: -4%;
            }
        }
    }
}
.WebConent-Title{
    width:baifenbi(960);
    border: solid 1px #efefef;
    height: 52px;
    margin: 0 auto;
    margin-top: 6px;
    margin-bottom: 12px;
    position: relative;
    >h1{
        cursor: pointer;
        vertical-align:-110%;
        display: inline-block;
        color: #e60012;
        font-size: 14px;
        font-weight: 100;
        border-right:1px solid #efefef;
        padding: 0px 15px;
        margin-left:10px ;
        
    }
    >h2{
        cursor: pointer;
        vertical-align:-110%;
        display: inline-block;
        color: #444f58;
        font-size: 14px;
        font-weight: 100;
        margin: 0 12px;
    }
    >div{
        position: absolute;
        right: 0px;
        display: inline-block;
        border: 1px solid #dcdee0;
        border-radius: 20px;
//      position: relative;
        height: 28px;
        margin: 11px 20px;
        width: 190px;
        cursor: pointer;
        >input{
            vertical-align: top;
            display: inline-block;
            margin:5px 10px;
            border: 0px;   
            height:18px;
            width: 146px;
        }
        >img{
            
            position: absolute;
            left:85%;
            top:6px;
            vertical-align: top;
            display:inline-block ;
            cursor: pointer;
        }
    }
    
}
.WebConent-Conent-top{
    width: baifenbi(960);
    border: solid 1px #efefef;
    margin:0 auto;
    height: 298px;
    margin-bottom: 14px;
    position: relative;
    >div:nth-of-type(1){
        margin-left: baifenbi(77);
        margin-right:baifenbi(77);
        margin-top: 54px;
        display: inline-block;
        text-align: center;
        >div:nth-of-type(1){
            cursor: pointer;
        }
        >h1{
            color: #e60012;
            font-size: 16px;
            font-weight: 100;
            line-height: 32px;
        }
        >h2{
            color: #444f58;
            font-size: 12px;
            font-weight: 100;
            margin-bottom: 38px;
        }
        >div:nth-of-type(2){
            cursor: pointer;
            background: #e60012;
            width: 58px;
            height: 26px;
            color: white;
            line-height: 26px;
            font-size: 14px;
            border-radius:5px ;
            display: inline-block;
        }
    }
    >div:nth-of-type(2){
        position: absolute;
        right: 0px;
        vertical-align: top;
        width:baifenbi-2(728);
        display: inline-block;
        margin-top: 19px;
        >div:hover{
            border: 1px solid deeppink;
        }
        >div{
            cursor: pointer;
            display: inline-block;
            border: 1px solid #dee0e2;
            height:256px;
            overflow: hidden;
            text-align: left;
            margin: 0 4px;
            position: relative;
            width: 23%;
            >div:nth-of-type(1){
                position: relative;
                height:176px;
                overflow: hidden;
                >img{
                    position: absolute;
                    left:50% ;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            >div:nth-of-type(2){
                background: #efefef;
                height: 80px;
                width: 100%;
                vertical-align: bottom;
                position: absolute;
                bottom: 0px;
                 >p{
                        margin-top: 12px;
                        color: #444f58;
                        font-size: 15px;
                        margin-left: 9px;
                    }
                >span{
                    color: #99999a;
                    font-size: 15px;
                    margin-left: 9px;
                    margin-bottom: 4px;
                    position: relative;
                    >div{
                        position: absolute;
                        bottom:-22px;
                        width: 83px;
                        height: 20px;
                        background: black;
                        border-radius:10px;
                        display: inline-block;
                        color: white;
                        font-size: 12px;
                        margin-left:55%;
                        line-height: 20px;
                        >img{
                            margin-left: 7px;
                            vertical-align: -4%;
                        }
                    }
                }
            }   
        }
    }
}
.WebConent-button{
    width: baifenbi(960);
    text-align: right;
    margin: 0 auto;
    margin-top: 24px;
    margin-bottom: 48px;
    >div{
        cursor: pointer;
        line-height: 36px;
        display: inline-block;
        padding:0 13px;
        border: 1px solid #e7e7e7;
        border-radius: 2px;
    }
    >div:hover{
        border:#eb413d 1px solid;
    }
    >div:nth-of-type(2){
        border: 1px solid #eb413d;
    }
    >div:nth-of-type(5){
        border: 0px;
        font-weight: bold;
    }
    >div:nth-of-type(7){
        border: 0px;
    }
    >div:nth-of-type(8){
        >input{
            width: 20px;
            border: 0px;
        }
    }
}
